import React from 'react'
import './Category.scss'
import { headData } from '../../actions/categoryAction'
import { connect } from 'react-redux'
class Category extends React.Component {
  constructor(props) {
    super(props)
    this.fetchData()
  }
  fetchData() {
    this.props.dispatch(headData())
  }
  goCategory() {
    // window.location.href = './category.html'
    window.location.href = './detail.html'
  }
  renderItems() {
    let items = this.props.items.slice(0, 8)
    return items.map((item, index) => {
      return (
        <div className="category-items" key={index} onClick={this.goCategory}>
          <img className="item-icon" src={item.url} alt="" />
          <p className="item-name">{item.name}</p>
        </div>
      )
    })
  }
  render() {
    return <div className="category-content clearfix">{this.renderItems()}</div>
  }
}
export default connect(state => ({
  items: state.categoryReducer.items
}))(Category)
